<template>
	<div class="redhome wraper" :class="{padTop:isIphoneX,iphone:isIphone}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<!-- 抢红包 -->
			<div class="center">{{$t('redHome-key1')}}</div>
			<span></span>
		</div>
		<div class="content">
			<!-- 持有的BTC数量 -->
			<div class="rob-all">
				<!-- 抢到的DC数量 -->
				<h1>{{$t('redHome-key2')}}</h1>
				<h2>{{totalBtc}}</h2>
			</div>
			<!-- 红包列表 -->
			<div class="red-list" :class="{sort1:random==1,sort2:random==2,sort3:random==3,sort4:random==4,sort5:random==5}">
				<!-- <div class="empty" v-if="redList.length===0">一大波红包正在袭来...</div> -->
				<div class="empty" v-if="redList.length===0">{{$t('redHome-key3')}}</div>
				<ul v-else>
					<div class="item" v-for="item in redList" @click="showMark(item)">
						<h3 class="img" :class="{status1:(!item.hasGot && !item.out),status2:item.hasGot,status3:item.out,zh:locale==='zh',en:locale==='en',ja:locale==='ja'}"></h3>
						<p class="one-line">{{item.nickname}}</p>
					</div>
				</ul>
			</div>
			<!-- 记录、兑换券、领取滚动 -->
			<div class="get-info">
				<p @click="$router.push('/redhistory')">
					<img v-if="locale==='zh'" src="../../static/images/redpacket/red-record-zh.png">
					<img v-if="locale==='en'" src="../../static/images/redpacket/red-record-en.png">
					<img v-if="locale==='ja'" src="../../static/images/redpacket/red-record-ja.png">
				</p>
				<!-- <p @click="$router.push('/redexchange')"><img src="../../static/images/redpacket/red-coupon.png"></p> -->
				<div class="roll" v-if="scrollList.length">
					<div class="scroll" :style="{top:topDistance*0.64*-1+'rem'}">
						<div class="item one-line" v-for="item in scrollList" v-if="locale==='zh'">
							<img v-if="item.url" :src="item.url+'?imageView2/1/w/100/h/100'">
							<img v-else src="../../static/images/redpacket/default_avatar.png">
							<span class="name one-line">{{item.nickname}}</span>的<i>{{item.typeName}}</i>刚刚产生了一个红包
						</div>
						<div class="item one-line" v-for="item in scrollList" v-if="locale==='en'">
							<img v-if="item.url" :src="item.url+'?imageView2/1/w/100/h/100'">
							<img v-else src="../../static/images/redpacket/default_avatar.png">
							<span class="name one-line" style="padding-right:3px;">{{item.nickname}}</span>generates one by <i>{{item.typeName}}</i>
						</div>
						<div class="item one-line" v-for="item in scrollList" v-if="locale==='ja'">
							<img v-if="item.url" :src="item.url+'?imageView2/1/w/100/h/100'">
							<img v-else src="../../static/images/redpacket/default_avatar.png">
							<span class="name one-line">{{item.nickname}}</span>の<i>{{item.typeName}}</i>お年玉1つ生成した
						</div>
					</div>
				</div>
			</div>
			<!-- 任务进度 -->
			<div class="tasks" v-if="taskList.length">
				<div class="title">
					<!-- <span>当天剩余抢红包次数</span> -->
					<span>{{$t('redHome-key4')}}</span>
					<b>{{taskListObj?taskListObj.total:0}} {{$t('redHome-key25')}}</b>
				</div>
				<ul>
					<li v-for="(item,index) in taskList">
						<div class="left">
							<span :style="{'backgroundImage':'url('+ item.logo +')'}"></span>
							<div class="info">
								<h4>{{item.title}}</h4>
								<p>{{$t('redHome-key5',{num:item.des})}}</p>
							</div>
						</div>
						<!-- 去领取 -->
						<div class="btn status1" @click="openTaskAction(item.tasskType,item.actionName,item.num)" v-if="item.enabled && item.num > 0">{{$t('redHome-key6',{num:item.num})}}</div>
						<!-- 去完成 -->
						<div class="btn status2" @click="openTaskAction(item.tasskType,item.actionName,item.num)" v-if="item.enabled && item.num <= 0">{{$t('redHome-key7',{num:item.perCount})}}</div>
						<!-- 已完成 -->
						<div class="btn status3" v-if="!item.enabled">{{$t('redHome-key8')}}</div>
					</li>
				</ul>
			</div>
			<!-- 规则 -->
			<div class="rule">
				<h5>{{$t('redHome-key9')}}</h5>
				<p><b>{{$t('redHome-key10')}}</b>{{$t('redHome-key11')}}</p>
				<p><b>{{$t('redHome-key12')}}</b>{{$t('redHome-key13')}}</p>
				<p style="color:#F25C48;"><b>{{$t('redHome-key14')}}</b>{{$t('redHome-key15')}}</p>
				<p><b>{{$t('redHome-key16')}}</b>{{$t('redHome-key17')}}</p>
			</div>
			<div class="copyright" v-if="locale!='en'">{{$t('redHome-key18')}}</div>
			<div class="copyright" v-else>{{$t('redHome-key18')}}</div>
		</div>
		<!-- 弹窗领取按钮 -->
		<transition name="fade">
			<div class="mark" v-show="markBox">
				<div class="mark-box">
					<div class="header">
						<h6><img :src="redItem.url+'?imageView2/1/w/100/h/100'" alt=""></h6>
						<p>{{redItem.nickname}}</p>
					</div>
					<div class="open" :class="{wait:waitRedResult,en:locale==='en'}" @click="getRedpacket"></div>
				</div>
				<div class="close" @click="markBox=false"></div>
			</div>
		</transition>
	</div>
</template>
<script src="./redhome.js"></script>
<style scoped lang="scss">
	@import './redhome.scss';
</style>